<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.2">


  <link rel="apple-touch-icon" sizes="180x180" href="/page/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/page/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/page/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/page/images/logo.svg" color="#222">

<link rel="stylesheet" href="/page/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"assd12138.gitee.io","root":"/page/","images":"/page/images","scheme":"Gemini","darkmode":false,"version":"8.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/page/search.json","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/page/js/config.js"></script>
<meta name="description" content="css定位浮动、z-index、overflowcss3的基础知识-边框|圆角|背景|渐变|过渡|动画css3的弹性盒子和多媒体查询">
<meta property="og:type" content="article">
<meta property="og:title" content="2021&#x2F;3&#x2F;8-2020&#x2F;3&#x2F;14-css学习">
<meta property="og:url" content="https://assd12138.gitee.io/page/2021/03/08/2021-3-8-2021-3-14-css%E5%AD%A6%E4%B9%A0/index.html">
<meta property="og:site_name" content="爱爱爱呵风他">
<meta property="og:description" content="css定位浮动、z-index、overflowcss3的基础知识-边框|圆角|背景|渐变|过渡|动画css3的弹性盒子和多媒体查询">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/assd12138/cdnpics/raw/master/img/3sd258.png">
<meta property="article:published_time" content="2021-03-08T07:45:35.000Z">
<meta property="article:modified_time" content="2022-05-09T03:18:13.061Z">
<meta property="article:author" content="爱爱爱呵风他">
<meta property="article:tag" content="2021学习计划">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/assd12138/cdnpics/raw/master/img/3sd258.png">


<link rel="canonical" href="https://assd12138.gitee.io/page/2021/03/08/2021-3-8-2021-3-14-css%E5%AD%A6%E4%B9%A0/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://assd12138.gitee.io/page/2021/03/08/2021-3-8-2021-3-14-css%E5%AD%A6%E4%B9%A0/","path":"2021/03/08/2021-3-8-2021-3-14-css学习/","title":"2021/3/8-2020/3/14-css学习"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>2021/3/8-2020/3/14-css学习 | 爱爱爱呵风他</title>
  




  <noscript>
    <link rel="stylesheet" href="/page/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/page/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">爱爱爱呵风他</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/page/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
        <li class="menu-item menu-item-tags"><a href="/page/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li>
        <li class="menu-item menu-item-archives"><a href="/page/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9A%E4%BD%8D"><span class="nav-number">1.</span> <span class="nav-text">定位</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9A%E4%BD%8D%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="nav-number">1.1.</span> <span class="nav-text">定位的作用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%9D%99%E6%80%81%E5%AE%9A%E4%BD%8D"><span class="nav-number">1.2.</span> <span class="nav-text">静态定位</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D"><span class="nav-number">1.3.</span> <span class="nav-text">相对定位</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D"><span class="nav-number">1.4.</span> <span class="nav-text">绝对定位</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#z-index"><span class="nav-number">1.5.</span> <span class="nav-text">z-index</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D"><span class="nav-number">1.6.</span> <span class="nav-text">固定定位</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%B2%98%E6%80%A7%E5%AE%9A%E4%BD%8D"><span class="nav-number">1.7.</span> <span class="nav-text">粘性定位</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%AE%E5%8A%A8"><span class="nav-number">2.</span> <span class="nav-text">浮动</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B5%AE%E5%8A%A8%E5%92%8C%E4%B8%8D%E6%B5%AE%E5%8A%A8"><span class="nav-number">2.1.</span> <span class="nav-text">浮动和不浮动</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="爱爱爱呵风他"
      src="https://s1.ax1x.com/2020/08/26/dWnF58.jpg">
  <p class="site-author-name" itemprop="name">爱爱爱呵风他</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/page/archives/">
          <span class="site-state-item-count">24</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/page/tags/">
        <span class="site-state-item-count">11</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="cc-license site-overview-item animated" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/zh-cn" class="cc-opacity" rel="noopener" target="_blank"><img src="https://cdn.jsdelivr.net/npm/@creativecommons/vocabulary@2020.11.3/assets/license_badges/small/by_nc_sa.svg" alt="Creative Commons"></a>
  </div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://assd12138.gitee.io/page/2021/03/08/2021-3-8-2021-3-14-css%E5%AD%A6%E4%B9%A0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://s1.ax1x.com/2020/08/26/dWnF58.jpg">
      <meta itemprop="name" content="爱爱爱呵风他">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="爱爱爱呵风他">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          2021/3/8-2020/3/14-css学习
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-03-08 15:45:35" itemprop="dateCreated datePublished" datetime="2021-03-08T15:45:35+08:00">2021-03-08</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2022-05-09 11:18:13" itemprop="dateModified" datetime="2022-05-09T11:18:13+08:00">2022-05-09</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <p>css定位浮动、z-index、overflow<br>css3的基础知识-边框|圆角|背景|渐变|过渡|动画<br>css3的弹性盒子和多媒体查询</p>
<span id="more"></span>

<h2 id="定位"><a href="#定位" class="headerlink" title="定位"></a>定位</h2><h3 id="定位的作用"><a href="#定位的作用" class="headerlink" title="定位的作用"></a>定位的作用</h3><p>  定位用于在正常的文档流的行为上添加一些移动</p>
<h3 id="静态定位"><a href="#静态定位" class="headerlink" title="静态定位"></a>静态定位</h3><p>  默认的定位方式，不会产生任何变化</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;ex1&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>第一段  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim soluta blanditiis nemo tempora perspiciatis exercitationem aut at, rem veniam animi, nesciunt repellat ratione id ipsam doloribus, commodi porro nisi cum?<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>第二段 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim soluta blanditiis nemo tempora perspiciatis exercitationem <span class="tag">&lt;<span class="name">span</span>&gt;</span>这边是一个span<span class="tag">&lt;/<span class="name">span</span>&gt;</span> aut at, rem veniam animi, nesciunt repellat ratione id ipsam doloribus, commodi porro nisi cum?<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-id">#ex1</span> <span class="selector-tag">p</span> &#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">position</span>: static;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">border</span>: <span class="number">1px</span> solid blue;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-id">#ex1</span> <span class="selector-tag">span</span>&#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">color</span>: red;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<hr>

<div id="ex1">
    <p>第一段  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim soluta blanditiis nemo tempora perspiciatis exercitationem aut at, rem veniam animi, nesciunt repellat ratione id ipsam doloribus, commodi porro nisi cum?</p>
    <p>第二段 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim soluta blanditiis nemo tempora perspiciatis exercitationem <span>这边是一个span</span> aut at, rem veniam animi, nesciunt repellat ratione id ipsam doloribus, commodi porro nisi cum?</p>
</div>
<style>
#ex1 p {
  position: static;
  border: 1px solid blue;
}
#ex1 span{
  color: red;
}
</style>


<hr>
<h3 id="相对定位"><a href="#相对定位" class="headerlink" title="相对定位"></a>相对定位</h3><p>根据top/right/bottom/left的值，将盒子相对于静态布局的位置进行相对的移动<br>将span的css中添加如下代码</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#ex2</span> <span class="selector-tag">span</span>&#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<hr>

<div id="ex2">
    <p>第一段  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim soluta blanditiis nemo tempora perspiciatis exercitationem aut at, rem veniam animi, nesciunt repellat ratione id ipsam doloribus, commodi porro nisi cum?</p>
    <p>第二段 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim soluta blanditiis nemo tempora perspiciatis exercitationem <span>这边是一个span</span> aut at, rem veniam animi, nesciunt repellat ratione id ipsam doloribus, commodi porro nisi cum?</p>
</div>
<style>
#ex2 p {
  position: static;
  border: 1px solid blue;
}
#ex2 span{
  position: relative;
  top: 20px;
  left: 10px;
  color: red;
}
</style>


<hr>
<h3 id="绝对定位"><a href="#绝对定位" class="headerlink" title="绝对定位"></a>绝对定位</h3><p>将span的position的值改为absolute，并将外层的p改为相对定位，可以观察到span块的现象</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#ex3</span> <span class="selector-tag">span</span>&#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<hr>

<div id="ex3">
    <p>第一段  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim soluta blanditiis nemo tempora perspiciatis exercitationem aut at, rem veniam animi, nesciunt repellat ratione id ipsam doloribus, commodi porro nisi cum?</p>
    <p>第二段 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim soluta blanditiis nemo tempora perspiciatis exercitationem <span>这边是一个span</span> aut at, rem veniam animi, nesciunt repellat ratione id ipsam doloribus, commodi porro nisi cum?</p>
</div>
<style>
#ex3 p {
  position: relative;
  border: 1px solid blue;
}
#ex3 span{
  position: absolute;
  top: 20px;
  left: 10px;
  color: red;
}
</style>


<hr>
<p>绝对定位的元素会相对于其第一个position不为static的祖先元素的位置来计算位置，并且绝对定位元素会脱离文档流，因此p中的文字并没有因为span的离开而留下空位</p>
<h3 id="z-index"><a href="#z-index" class="headerlink" title="z-index"></a>z-index</h3><p>绝对定位元素的层叠由z-index来决定上下,参看下面的代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;ex4&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p3&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-id">#ex4</span>&#123;</span></span><br><span class="line"><span class="language-css">  <span class="comment">/* 仅仅为了撑开盒子 */</span></span></span><br><span class="line"><span class="language-css">  <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-id">#ex4</span> <span class="selector-tag">p</span> &#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-id">#ex4</span> <span class="selector-class">.p1</span> &#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">background-color</span>: blue;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">width</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">height</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">z-index</span>: <span class="number">2</span>;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-id">#ex4</span> <span class="selector-class">.p2</span>&#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">background-color</span>: red;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">width</span>: <span class="number">40px</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">height</span>: <span class="number">40px</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">z-index</span>: <span class="number">1</span>;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-id">#ex4</span> <span class="selector-class">.p3</span>&#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">background-color</span>: green;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">width</span>: <span class="number">80px</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">height</span>: <span class="number">80px</span>;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<hr>

  <div id="ex4">
    <p class="p1"></p>
    <p class="p2"></p>
    <p class="p3"></p>
  </div>
  <style>
  #ex4{
    /* 仅仅为了撑开盒子 */
    width: 100px;
    height: 100px;
  }
  #ex4 p {
    position: absolute;
  }
  #ex4 .p1 {
    background-color: blue;
    width: 20px;
    height: 20px;
    z-index: 2;
  }
  #ex4 .p2{
    background-color: red;
    width: 40px;
    height: 40px;
    z-index: 1;
  }
  #ex4 .p3{
    background-color: green;
    width: 80px;
    height: 80px;
  }
  </style>


<hr>
<h3 id="固定定位"><a href="#固定定位" class="headerlink" title="固定定位"></a>固定定位</h3><p>固定定位用于创建一个相对于浏览器视口进行定位的元素。在一个元素上设置<code>position:fixed;</code>创建，典型的就是固定于页面视口的标题/菜单栏和BackToTop按钮，例如hexoBlog右侧的按钮</p>
<p><img src="https://gitee.com/assd12138/cdnpics/raw/master/img/3sd258.png"></p>
<p>这个按钮会在页面向下滑动的时候始终存在。fixed也因此常用于展示一些页面广告之类的元素</p>
<h3 id="粘性定位"><a href="#粘性定位" class="headerlink" title="粘性定位"></a>粘性定位</h3><p>粘性定位在元素在被滚动到某个特定点之前表现的和普通元素一致，滚动到特定点以后和固定定位一致</p>
<p>下面将z-index例子里的三个p块换成sticky</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#ex5</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: sticky;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><a href="http://assd12138.gitee.io/cdnpics/stickyposition.html">点此查看</a></p>
<p>如果不设置各个p块的z-index，则会从下往上覆盖上去</p>
<h2 id="浮动"><a href="#浮动" class="headerlink" title="浮动"></a>浮动</h2><p>浮动的初衷是在图文排版时制造文字环绕图片的效果，后来被广泛用于传统的布局之中</p>
<h3 id="浮动和不浮动"><a href="#浮动和不浮动" class="headerlink" title="浮动和不浮动"></a>浮动和不浮动</h3><p>如果没有浮动</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">article</span> <span class="attr">id</span>=<span class="string">&quot;ex&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>大大的标题<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;https://gitee.com/assd12138/cdnpics/raw/master/img/c5d34db9ef4eff9b14f892f3ea17c970487151de.png&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;图片&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dignissimos voluptatem nobis itaque cupiditate quaerat ab obcaecati ducimus aliquid quo vero iste corporis aperiam cum, laudantium aut tenetur. Molestiae, hic?<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum, reiciendis sed pariatur quod minima fugiat nisi aspernatur voluptates eum architecto commodi quia ut reprehenderit iure nulla at facilis perferendis aliquid?<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-id">#ex</span>&#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">max-width</span>: <span class="number">900px</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">margin</span>: <span class="number">0</span> auto;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-id">#ex</span> <span class="selector-tag">img</span>&#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-id">#ex</span> <span class="selector-tag">p</span> &#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">line-height</span>: <span class="number">2</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">word-spacing</span>: <span class="number">0.1rem</span>;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><a href="http://assd12138.gitee.io/cdnpics/nofloat.html">点此查看</a></p>
<p>要使文字环绕图片，则设置图片浮动</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#ex</span> <span class="selector-tag">img</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">  <span class="attribute">float</span>: left;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><a href="http://assd12138.gitee.io/cdnpics/nofloat.html">点此查看</a>后，点击选项切换浮动状态</p>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/page/tags/2021%E5%AD%A6%E4%B9%A0%E8%AE%A1%E5%88%92/" rel="tag"># 2021学习计划</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/page/2020/10/23/css%E7%9A%84inline-block%E5%9F%BA%E7%BA%BF%E9%97%AE%E9%A2%98/" rel="prev" title="css的inline-block基线问题">
                  <i class="fa fa-chevron-left"></i> css的inline-block基线问题
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/page/2021/07/16/MDN%E4%B8%8A%E7%9A%84%E5%9C%A8%E7%BA%BF%E8%BF%90%E8%A1%8C%E6%98%AF%E6%80%8E%E4%B9%88%E5%81%9A%E7%9A%84%EF%BC%88%E4%BB%85%E9%99%90html-css%EF%BC%89/" rel="next" title="MDN上的在线运行是怎么做的（仅限html+css）">
                  MDN上的在线运行是怎么做的（仅限html+css） <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






    <div class="comments utterances-container"></div>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">爱爱爱呵风他</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script size="300" alpha="0.6" zIndex="-1" src="https://cdn.jsdelivr.net/npm/ribbon.js@1.0.2/dist/ribbon.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/page/js/comments.js"></script><script src="/page/js/utils.js"></script><script src="/page/js/motion.js"></script><script src="/page/js/next-boot.js"></script>

  
<script src="https://cdn.jsdelivr.net/npm/hexo-generator-searchdb@1.4.0/dist/search.js" integrity="sha256-vXZMYLEqsROAXkEw93GGIvaB2ab+QW6w3+1ahD9nXXA=" crossorigin="anonymous"></script>
<script src="/page/js/third-party/search/local-search.js"></script>





  




<script class="next-config" data-name="utterances" type="application/json">{"enable":true,"repo":"assd12138/utterancesComment","issue_term":"pathname","theme":"preferred-color-scheme"}</script>
<script src="/page/js/third-party/comments/utterances.js"></script>

</body>
</html>
